import '@/assets/style/index.css';
import KY3D from '@/editor/KY3D';
import { APIEvent } from '@/libs/const/event';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import Editor from './Editor';
import Loading from './Loading';
import store from './store';
import ThemeProviderWrapper from './styles';
import GlobalStyle from './styles/GlobalStyle';


class App extends React.Component {

  constructor(props: any) {
    super(props);
    this.state = {
      visible: false
    }
  }

  private apiLoadComplete(): void {
    
    this.setState({ visible: true });
  }


  render(): React.ReactNode {

    const isLoggedIn = (this.state as any).visible;

    KY3D.ED.on(APIEvent.API_LOAD_COMPLETE, this, this.apiLoadComplete);

    let el:any;

    if (isLoggedIn) {
      el = <Editor/>
    }
    else {
      el = <Loading/>
    }

    return (
      <Provider store={store}>
        <ThemeProviderWrapper>
          <GlobalStyle />
          {el}
        </ThemeProviderWrapper>
      </Provider>
    )
  }
}

class ReactDom {
  constructor() {
    ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
      <React.StrictMode>
          <App />
      </React.StrictMode>
    )
  }
}

export default ReactDom;
